/**
 * 考勤排行
 */
import React from 'react';
import { connect } from 'umi';
import { get as getPath } from 'object-path';
import { Form, Tabs, Button } from 'antd';
import { formatMessage } from 'umi';
import moment from 'moment';
import Locale from '@/utils/locale';
import { CompanyDepartPlus } from '@/containers';
import DateRange from '@/components/DateRange';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { withRoutePage } from '@/utils/enhanceUtils';

// 页面组件
import Attendance from './Attendance';
import Leave from './Leave';
import Overtime from './Overtime';
import Abnormal from './Abnormal';

const { locale } = new Locale('stat.report');

class ReportRank extends React.Component {
    componentDidMount() {}

    componentWillUnmount() {
        const { dispatch, reportRank } = this.props;
        dispatch({
            type: 'reportRank/save',
            payload: {
                paginationAttendance: {
                    ...reportRank.paginationAttendance,
                    current: 1,
                    pageSize: 10
                },
                paginationLeave: {
                    ...reportRank.paginationLeave,
                    current: 1,
                    pageSize: 10
                },
                paginationOvertime: {
                    ...reportRank.paginationOvertime,
                    current: 1,
                    pageSize: 10
                },
                paginationAbnormal: {
                    ...reportRank.paginationAbnormal,
                    current: 1,
                    pageSize: 10
                }
            }
        });
    }

    changeTab = () => {};

    render() {
        const { TabPane } = Tabs;
        const { location } = this.props;
        const {
            query: { companyId, departmentId, dateType, startTime, endTime, quarter }
        } = location;
        const initCompanyDepart = companyId || departmentId ? { companyId, departmentId } : undefined;

        const config = [
            {
                field: 'companyDepart',
                label: '机构',
                config: {
                    initialValue: initCompanyDepart
                },
                component: <CompanyDepartPlus />
            },
            {
                field: 'date',
                config: {
                    initialValue: {
                        range: [
                            !startTime ? moment().startOf('year') : moment(startTime),
                            !endTime ? moment().endOf('year') : moment(endTime)
                        ],
                        quarter: dateType === 'quarter' ? (quarter && Number(quarter)) || 1 : '',
                        type: dateType || 'month'
                    }
                },
                component: <DateRange allowClear={false} />
            },
            {
                component: (
                    <div>
                        <Button type="primary" htmlType="submit">
                            {locale('form.search', false)}
                        </Button>
                    </div>
                )
            }
        ];
        return (
            <PageHeaderWrapper>
                <Tabs
                    defaultActiveKey={getPath(this.props, 'location.query.key', 'attendance')}
                    style={{ background: '#fff', padding: '0 16px' }}
                    onChange={this.changeTab}
                >
                    <TabPane
                        key="attendance"
                        tab={formatMessage({
                            id: 'stat.report.cqlph'
                        })}
                    >
                        <Attendance config={config} />
                    </TabPane>
                    <TabPane
                        key="leave"
                        tab={formatMessage({
                            id: 'stat.report.qjryph'
                        })}
                    >
                        <Leave config={config} />
                    </TabPane>
                    <TabPane
                        key="overtime"
                        tab={formatMessage({
                            id: 'stat.report.jbryph'
                        })}
                    >
                        <Overtime config={config} />
                    </TabPane>
                    <TabPane
                        key="abnormal"
                        tab={formatMessage({
                            id: 'stat.report.kqycph'
                        })}
                    >
                        <Abnormal config={config} />
                    </TabPane>
                </Tabs>
            </PageHeaderWrapper>
        );
    }
}
export default withRoutePage(
    connect(({ reportRank, loading }) => ({
        reportRank,
        loading: loading.models.reportRank
    }))(Form.create()(ReportRank))
);
